<template>
  <view class="farming-info">
    <view class="search-wrap rbox box_x_center box_space_b">
      <view class="wrap rbox boxf_1">
        <view class="iconfont icon-search"></view>
        <input type="text" placeholder="请输入您想查看的文章" />
      </view>
      <view class="btn-search rbox box_center">搜索</view>
    </view>

    <!-- tab列表 -->
    <view class="list-wrap">
      <view class="tab-title rbox box_y_center">
        <view
          v-for="(item, index) in items"
          :key="index"
          :class="['name', { btna: count == index }]"
          @tap="change(index)"
        >
          {{ item }}
        </view>
      </view>
      <view class="tab-cont" :class="{ dis: btnnum == 0 }">
        <comList :list="list" url="farmingInfoShow"></comList>
      </view>
      <view class="tab-cont" :class="{ dis: btnnum == 1 }">1信息 </view>
      <view class="tab-cont" :class="{ dis: btnnum == 2 }">2信息 </view>
    </view>
  </view>
</template>

<script>
import comList from '../../components/com-list'
export default {
  data() {
    return {
      items: ["基本信息", "公告信息", "换区信息"],
      btnnum: 0,
      count: "",
      list: [
        {
          title: '霜霉病是怎么形成的呢？',
          sub: '霜霉病指的是由真菌中的霜霉菌引的植物病害。霜霉菌是专性寄生菌...',
          imgUrl: '/static/c1.png',
          name: '张XX',
          work: '植物病学专家',
          date: '昨天17:22'
        },
        {
          title: '霜霉病是怎么形成的呢？',
          sub: '霜霉病指的是由真菌中的霜霉菌引的植物病害。霜霉菌是专性寄生菌...',
          imgUrl: '/static/c2.png',
          name: '张XX',
          work: '植物病学专家',
          date: '昨天17:22'
        }
      ]
    }
  },
  methods: {
    change(e) {
      this.count = e
      this.btnnum = e
    },
  },
  components: {
    comList
  }
}
</script>

<style lang="scss" scoped>
.farming-info {
  min-height: 100vh;
  background-color: #f7f7f7;
  .search-wrap {
    margin: 22rpx 54rpx;
    font-size: 26rpx;
    line-height: 1;
    color: #a1a1a1;
    background-color: #fff;
    .wrap {
      position: relative;
      padding: 12rpx 20rpx 12rpx 60rpx;
      border: 1rpx solid #a1a1a1;
      border-radius: 36rpx;
      .iconfont {
        position: absolute;
        top: 50%;
        left: 6px;
        transform: translateY(-50%);
        font-size: 36rpx;
        color: #ccc;
      }
    }
    .btn-search {
      padding: 10rpx 30rpx;
      font-size: 26rpx;
      line-height: 1;
      color: #fff;
      background-color: #1de1c3;
      border-radius: 36rpx;
      margin-left: 20rpx;
    }
  }
  .list-wrap {
    margin-top: 4rpx;
    .tab-title {
      padding: 18rpx 42rpx;
      .name {
        position: relative;
        font-size: 28rpx;
        color: #333;
        &:not(:first-child) {
          margin-left: 60rpx;
        }
        &.btna {
          color: #1de1c3;
          &::after {
            position: absolute;
            bottom: -18rpx;
            left: 50%;
            transform: translateX(-50%);
            content: "";
            width: 80rpx;
            height: 6rpx;
            background: #1de1c3;
          }
        }
      }
    }
    .tab-cont {
      display: none;
      &.dis {
        display: block;
      }
    }
  }
}
</style>